import React, { Component } from 'react'
// 过渡动画组件 -- 它还是需要css样式的加持
// CSSTransition in:boolean进出场 timeout:number动画时长ms
import { CSSTransition } from 'react-transition-group'
import './style/animate.css'

class App extends Component {
  state = {
    show: true
  }
  render() {
    return (
      <div>
        {/* CSSTransition,它只能一个子元素,之于后代可以有N个 */}
        <CSSTransition
          in={this.state.show}
          timeout={300}
          // 给样式名称添加一个前缀
          classNames="fade"
          // 如果你出场后，可以删除此dom,如果有此属性，样式中的.fade-exit-done可以不写
          unmountOnExit
        >
          <h3>我是一个内容显示</h3>
        </CSSTransition>
        <hr />
        <button
          onClick={() => {
            this.setState(state => ({ show: !state.show }))
          }}
        >
          切换显示
        </button>
      </div>
    )
  }
}

export default App
